<template>
  <div>
    <el-dialog
      class="custom-dialog"
      v-model="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="实时视频"
      width="720px"
      @opened="afterOpened"
      @close="handleClose"
    >
      <div class="detail">
        <div class="info">
          <el-row :gutter="20">
            <el-col :span="12">
              <span class="label">设备名称:</span>
              <span class="value">{{ detail.nickName }}</span>
            </el-col>
            <el-col :span="12">
              <span class="label">设备位置:</span>
              <span class="value"
                >{{ detail.address
                }}<svg-icon name="location" @click="handleLocation"
              /></span>
            </el-col>
          </el-row>
        </div>
        <div v-loading="loading" id="live-video" class="video-wrapper">
          <!-- <img style="width: 100%; height: 100%" :src="azImg2" /> -->
        </div>
      </div>
    </el-dialog>
    <ChooseLocation
      v-model:dialog-visible="chooseLocationDialogVisible"
      :disabled="true"
      :latlnt="detail.position"
      :device-location="detail.nickName"
    />
  </div>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import Player from 'xgplayer'
import HlsPlugin from 'xgplayer-hls'

// import azImg2 from '@/assets/imgs/manager/azImg2.png'
import {
  closeCameraStream,
  openCameraStream,
} from '@/api/manager/dataManage/deviceManage'
import ChooseLocation from '@/components/chooseLocation.vue'

let player = null

const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
  },
})

const emit = defineEmits(['close'])

const dialogVisible = ref(false)

const chooseLocationDialogVisible = ref(false)

const loading = ref(false)

const handleClose = () => {
  if (player) {
    try {
      player.destroy()
    } catch (error) {
      console.error('player destroy failed:', error)
    }
    player = null
  }
  if (props.detail.pkid) {
    closeCameraStream(props.detail.pkid)
  }
  dialogVisible.value = false
  loading.value = false
  emit('close')
}

const handleLocation = () => {
  if (props.detail.position) {
    const lngLat = props.detail.position.split(',')
    if (
      lngLat.filter(
        (item) => item !== undefined && item !== '' && item.trim() !== '',
      ).length === 2
    ) {
      chooseLocationDialogVisible.value = true
    } else {
      ElMessage.error('位置数据错误')
    }
  } else {
    ElMessage.error('无位置数据')
  }
}

const afterOpened = () => {
  if (props.detail.pkid) {
    loading.value = true
    openCameraStream(props.detail.pkid)
      .then((res) => {
        if (res.success) {
          const url = `${window.VIDEO_BASE_URL}/hls/${props.detail.pkid}/hls.m3u8`
          player = new Player({
            // el: document.querySelector('#live-video'),
            id: 'live-video',
            url: url,
            width: '100%',
            height: '420px',
            autoplay: true,
            autoplayMuted: true,
            fitVideoSize: 'fixed',
            videoFillMode: 'contain',
            isLive: false,
            plugins: [HlsPlugin],
          })
        } else {
          ElMessage.error(res.message || '获取视频流失败')
        }
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }
}

defineExpose({ dialogVisible })
</script>
<style lang="scss" scoped>
.detail {
  width: 100%;
  display: flex;
  flex-direction: column;
  .info {
    width: 100%;
    height: 36px;
    background: rgba(117, 117, 117, 0.05);
    border-radius: 4px;
    margin-bottom: 20px;
    :deep(.el-row) {
      height: 100%;
      display: flex;
      align-items: center;
    }
    .label {
      font-size: 14px;
      line-height: 16px;
      font-weight: 400;
      color: #333333;
      display: inline-block;
      margin-right: 10px;
      text-align: right;
      width: 80px;
    }
    .value {
      display: inline-block;
      font-size: 14px;
      line-height: 16px;
      font-weight: 400;
      color: #757575;
      .svg-icon {
        width: 15px;
        height: 14px;
        margin: 0px 0 0 10px;
        cursor: pointer;
      }
    }
  }
  .video-wrapper {
    width: 100%;
    height: 420px;
  }
}
</style>
